<template>
    <div class="articles-area">
        <el-card style="text-align: left;width: 990px;margin: 35px auto 0 auto">
            <div>
                <span style="font-size: 20px"><strong>{{ article.articleTitle }}</strong></span>
                <el-divider content-position="left">{{ article.articleDate }}</el-divider>
                <div class="markdown-body">
                    <div v-html="article.articleContentHtml"></div>
                </div>
            </div>
        </el-card>
    </div>
</template>

<script>
    import {getCurrentInstance, onMounted, reactive, toRefs} from "vue";

    export default {
        name: 'ArticleDetails',
        setup() {
            const data = reactive({
                article: []
            })
            onMounted(() => {
                loadArticle()
            })

            let {proxy} = getCurrentInstance()

            function loadArticle() {
                proxy.$axios.get('/article/' + proxy.$route.query.id).then(resp => {
                    if (resp && resp.data.code === 200) {
                        data.article = resp.data.result
                    }
                })
            }
            return {
                ...toRefs(data),
                onMounted,
                loadArticle
            }
        }

    }
</script>

<style scoped>
    @import "../../styles/markdown.css";
</style>
